﻿@model dynamic
@{
    Layout.Title = "首页";
}
<style>
    .thumbnails > li
    {
        margin-left: 25px;
    }
</style>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
           
            <div class="carousel slide" id="myCarousel">
                <ol class="carousel-indicators">
                    <li data-slide-to="0" data-target="#myCarousel"></li>
                    <li data-slide-to="1" data-target="#myCarousel" class="active"></li>
                    <li data-slide-to="2" data-target="#myCarousel"></li>
                </ol>
                <div class="container">
                    <div class="row">
                        <div class="carousel-inner">
                            <div class="item">
                                <img id="img1" alt="" src="@Href("~/Modules/CloudClass/Content/Home/images/1.png")"/>

                            </div>
                            <div class="item active">
                                <img id="img2" alt="" src="@Href("~/Modules/CloudClass/Content/Home/images/2.jpg")" />

                            </div>
                            <div id="img3" class="item">
                                <img alt="" src="@Href("~/Modules/CloudClass/Content/Home/images/3.png")" />

                            </div>
                        </div>
                    </div>
                </div>
                <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a> <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
            </div>
        </div>

    </div>
</div>
<div class="container">
    <div class="row">

        <div class="span3">
            <h4><a>精选课程</a> &nbsp;<small>3500+</small></h4>
            <ul class="inline small">
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>

            </ul>
            <small><a>更多>></a></small>
        </div>
        <div class="span3">
            <h4><a>精选课程</a> &nbsp;<small>3500+</small></h4>
            <ul class="inline small">
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>

            </ul>
            <small><a>更多>></a></small>
        </div>
        <div class="span3">
            <h4><a>精选课程</a> &nbsp;<small>3500+</small></h4>
            <ul class="inline small">
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>
                <li>
                    <a>IT与互联网</a>
                </li>

            </ul>
            <small><a>更多>></a></small>
        </div>
        <div class="span3">
            <img src="@Href("~/Modules/CloudClass/Content/Home/images/ipadd.png")"/>
        </div>

    </div>
    <div class="row">
        <hr />
    </div>

</div>
<div class="container">
    <div class="row">
        <div class="navbar navbar-inverse">
            <ul class="nav">
                <li>
                    <h5>热门推荐</h5>
                </li>
            </ul>
            <ul class="nav pull-right">
                <li><a><small>更多课程>></small></a></li>
            </ul>
        </div>

    </div>
    <div class="row ">

        <ul class="thumbnails">
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/leftclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>


            <li class="span2.5">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>


        </ul>

    </div>
</div>

<div class="container">
    <div class="row">
        <div class="navbar navbar-inverse">
            <ul class="nav">
                <li>
                    <h5>新品推荐</h5>
                </li>
            </ul>
            <ul class="nav pull-right">
                <li><a><small>更多课程>></small></a></li>
            </ul>
        </div>

    </div>
    <div class="row ">

        <ul class="thumbnails">
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/leftclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>


            <li class="span2.5">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>
            <li class="">
                <div class="thumbnail">
                    <img src="@Href("~/Modules/CloudClass/Content/Home/images/rightclass.png")" alt="">
                    <h5>Thumbnail label</h5>
                    <p>Thumbnail caption...</p>
                    <a class="btn btn-small btn-primary">免费</a>
                </div>
            </li>


        </ul>

    </div>
</div>




<script type="text/javascript">
    $(function () {
        $('.carousel').carousel({
            interval: 5000,
            anto: true
        })

        //全屏显示图片
        $("#myCarousel").css("background", "#E3DED8");

        $('#myCarousel').on('slid', function () {
            setTimeout(function () {
                if ($("#img1").is(":visible")) {
                    $("#myCarousel").css("background", "#111430");
                } else if ($("#img2").is(":visible")) {
                    $("#myCarousel").css("background", "#E3DED8");
                } else if ($("#img3").is(":visible")) {
                    $("#myCarousel").css("background", "#EEEEEE");
                }
            }, 200)



        })
        
      
    })

</script>
